<template>
	<view class="bottom_input">
		<!-- <view class="placeholder"></view> -->
		<view class="bottom_input_pos" :style="distenceBHeight">
			<view class="left">
				<text class="iconfont icon" @click="clickAudio"				v-if="drawerType !== 'audio'">&#xe805;</text>				<text class="iconfont icon" @click="showKeyword" v-else>&#xe65b;</text>
			</view>
			<view class="center">
				<view class="c_input">
					<input class="input" v-model="inputContent" placeholder="请文明发言..." cursor-spacing="15" @focus="focusEm" v-if="drawerType !== 'audio'"/>					<view class="audio" :style="audioBg" v-else @touchstart="startAudio" @touchend="endAudio" @touchmove="cancelAudio">						<text class="text">{{isAudioFlag ? '松开 发送' : '按下 录音'}}</text>					</view>
				</view>
			</view>
			<view class="right">
				<view class="send" v-if="inputContent" @click="send">
					<text class="text">发送</text>
				</view>
				<view class="emo" v-else>
					<text class="iconfont icon" @click="clickEmo">&#xe659;</text>
					<text class="iconfont icon" @click="clickMore">&#xe726;</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { chat as chatHooks } from '@/hooks/chat.js'const { drawerType,handleType,keyWordH,handleKeyWordH } = chatHooks() // 聊天相关的hooks
const emit = defineEmits(['focusEm','sendEm','clickEmEmo','clickEmMore','clickEmAudio','sendStarEmAudio','sendEndEmAudio'])
const inputContent = ref('') // 输入框的内容const isAudioFlag = ref(false) // 是否处于输入语音状态const distenceBHeight = computed(() =>{ // 根据不同的信息弹窗类型计算此组件距离底部的高度		if(drawerType.value === 'emo'){		return `bottom: 500rpx;`	}else if(drawerType.value === 'more'){		return `bottom: 400rpx;`	}else if(drawerType.value === 'input'){		return `bottom: ${keyWordH}px;`	}else{		return `bottom: 0rpx;`	}})
const focusEm = () => { // 输入框聚焦的时候触发	// #ifdef APP-NVUE
	uni.onKeyboardHeightChange((e) =>{
		handleKeyWordH(e.height)
	})
	// #endif	emit('focusEm')
}
const send = () =>{ // 点击发送时候触发		emit('sendEm',inputContent.value)
	inputContent.value = ''}const clickAudio = () =>{ // 点击语音	uni.hideKeyboard()	emit('clickEmAudio')}const startAudio = () =>{ // 开始发送语音	isAudioFlag.value = true
	emit('sendStarEmAudio')}const endAudio = () =>{ // 结束发送语音	isAudioFlag.value = false
	emit('sendEndEmAudio')}

const cancelAudio = () => { // 上滑取消发送
	// emit('cancelEmAudio')
}const audioBg = computed(() =>{ // 通过判断是否在发送语音改变语音按钮的颜色	if(isAudioFlag.value){		return `background-color: #f5f5f5;`	}else{		return `background-color: #fff;`	}})const showKeyword = () =>{ // 点击切换成输入状态	handleType('input')}const clickEmo = () =>{ // 点击表情	uni.hideKeyboard()	emit('clickEmEmo')}const clickMore = () =>{ // 点击更多	uni.hideKeyboard()	emit('clickEmMore')}
</script>

<style lang="less" scoped>
.bottom_input{
	.bottom_input_pos{
		height: 100rpx;
		z-index: 99;
		position: fixed;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: row;
		align-items: center;
		background-color: #f5f5f5;
		.left{
			width: 80rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		.center{
			flex: 1;			display: flex;			flex-direction: row;
			.c_input{				flex: 1;				display: flex;				flex-direction: column;
				background-color: #fff;
				margin-right: 20rpx;
				.input{					flex: 1;					height: 60rpx;
					font-size: 30rpx;					padding: 5rpx 10rpx;					background-color: #fff;
				}				.audio{					flex: 1;					display: flex;
					height: 60rpx;					flex-direction: row;					justify-content: center;					align-items: center;					height: 60rpx;					.text{						font-size: 30rpx;					}				}
			}
		}
		.right{
			padding-right: 30rpx;
			.send{
				background-color: #f7931e;
				padding: 5rpx 8rpx;
				border-radius: 5rpx;
				.text{
					color: #333;
				}
			}
			.emo{
				width: 100rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-around;
			}
		}
	}
}</style>